<template>
  <Modal v-model="modalVisible" title="容器详情" @on-cancel="modalManiCancel" :width="1000">
    <div class="modal-detail">
      <h4 class="zl-title">容器详情</h4>
      <div class="zl-page-loading" v-if="isLoading">
        <Spin fix></Spin>
      </div>
      <Row :gutter="10" class="zl-detail" v-else>
        <Col :span="8" class="f-nowrap">名称：{{pod.id}}</Col>
        <Col :span="4">状态：{{pod.status && pod.status.phase === 'Running' ? '激活' : '停止'}}</Col>
        <Col :span="12" class="f-nowrap">镜像：{{pod.spec && pod.spec.containers[0].image}}</Col>
        <Col :span="8">容器IP：{{pod.status && pod.status.podIP}}</Col>
        <Col :span="4">端口：
          <span v-if="pod.spec && pod.spec.containers[0].ports.length != '0'">{{pod.spec.containers[0].ports[0].containerPort}} {{pod.spec.containers[0].ports[0].protocol}}</span>
        </Col>
        <Col :span="12">主机名：{{pod.spec && pod.spec.nodeName ? pod.spec.nodeName : ''}}</Col>
        <Col :span="8">主机IP：{{pod.status && pod.status.hostIP}}</Col>
        <Col :span="12">创建时间：{{pod.createTime}}</Col>
      </Row>

      <monitor :environmentId="$route.params.environmentId" title="使用情况" :podId="modalForm.id" v-if="modalForm.id" ></monitor>
    </div>
    <div slot="footer">
      <Button type="warning" @click="modalManiCancel">取消</Button>
      <Button type="primary" @click="modalManiCancel">确定</Button>
    </div>
  </Modal>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import Monitor from '@/components/monitor'
export default {
  components: { Monitor },
  data() {
    return {
      modalForm: {
        id: ''
      },
      isLoading: true,
      modalRules: {
      },
      modalVisible: false,
      pod: {}
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  mounted() {
  },
  methods: {
    // 获取初始数据
    init() {
      this.getPodInfo()
    },
    // 获取容器基本信息
    getPodInfo() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/pods/' + this.modalForm.id
      }).then((res) => {
        if (res && res.code === '0') {
          this.pod = res.data
        } else {
          this.$Message.warning({
            content: res.message,
            duration: this.DURATION
          })
        }
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
        this.$Message.error(err.message)
      })
    },
    // 取消操作
    modalManiCancel() {
      // 用于让monitor从dom上删除
      this.modalForm.id = ''
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
      if (val) {
        this.modalForm = Object.assign({}, this.form)
        this.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.zl-title {
  margin-top: 10px;
}
</style>
